import * as echarts from 'echarts'
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'

export const BarModule = forwardRef<{ resize: () => void }, any>(
  ({ data, color, title, barHeight = 110 }, ref) => {
    const chartDom = useRef<HTMLDivElement>(null)
    const myChart = useRef<echarts.EChartsType>()
    // const data2 = [220, 182, 191, 234, 290, 330, 310, 123, 442]
    // const yMax = 500
    // const dataShadow = []
    // for (let i = 0; i < data2.length; i++) {
    //   dataShadow.push(yMax)
    // }
    /**初始化图表 */
    useEffect(() => {
      if (!chartDom.current) {
        return
      }
      const newArr = data?.yData?.map((num: any) => (num === 0 ? null : 0))
      if (!myChart.current) {
        myChart.current = echarts.init(chartDom.current, null, {
          renderer: 'canvas'
        })
      }
      myChart.current.setOption({
        title: {
          text: title,
          padding: 0,
          textStyle: {
            color: '#fff', // 标题颜色
            fontSize: 16, // 字体大小
            fontWeight: 'normal',
            fontFamily: 'PuHuiTi-Bold' // 字体系列
          }
        },
        grid: {
          top: 34,
          left: -25,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        xAxis: {
          axisTick: {
            show: false
          },
          type: 'category',
          animation: true,
          data: data.xData
            ? data.xData
            : [
                '20-24',
                '25-29',
                '30-34',
                '35-39',
                '40-44',
                '45-49',
                '50-54',
                '55-59',
                '>=60'
              ],
          splitLine: {
            show: false
          },
          axisLine: {
            // 控制轴线样式
            lineStyle: {
              // width: 900,
              color: 'rgba(255,255,255,0.2)' // 设置轴线的颜色
            }
          },
          axisLabel: {
            interval: 0,
            // 控制轴标签样式
            // fontFamily: "PuHuiTi-Regular",
            fontSize: 11, // 字体大小
            color: '#999' // 设置轴标签文字的颜色,
          },
          xisTick: {
            alignWithLabel: true
          }
        },
        // yAxis: [
        //   {
        //     type: "value"
        //   }
        // ],
        yAxis: {
          show: false
        },
        // tooltip: {
        //   trigger: "axis",
        //   formatter(
        //     params: {
        //       name: string
        //       seriesName: string
        //       value: string
        //       marker: string
        //     }[]
        //   ) {
        //     const htmlText = `<p >${params[0].name}<span style="font-weight:600;margin-left:8px">${params[0].value}{${title}}</span></p>`

        //     return htmlText
        //   }
        // },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        animation: true,
        series: [
          {
            type: 'bar',
            name: '年龄',
            stack: '1',
            showBackground: false,
            barMaxWidth: 10,
            animationDelay: function (idx: number) {
              // 动画延迟，根据数据的索引不同而不同
              return idx * 100
            },
            itemStyle: {
              animationDuration: 2000,
              //为每个柱子设置渐变颜色
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1, // x1, y1, x2, y2 指定渐变的起点和终点位置
                [
                  { offset: 0, color: 'rgba(246, 110, 44, 0.04)' }, // 渐变起始颜色
                  { offset: 1, color: 'rgba(246, 110, 44,0.72)' } // 渐变结束颜色
                ]
              )
            },
            data: data.yData ? data.yData : []
          },
          {
            stack: '1',
            name: '年龄',
            type: 'bar',
            barMaxWidth: 10,
            itemStyle: {
              normal: {
                color: 'rgba(246,110,44,1)',
                borderColor: 'rgba(246,110,44,1)',
                borderWidth: 2,
                shadowBlur: 0,
                shadowColor: 'rgba(246,110,44,0.81)'
              }
            },
            data: newArr ? newArr : []
          }
        ]
      })
    }, [data])

    useEffect(() => {
      return () => {
        if (myChart.current && !myChart.current.isDisposed()) {
          echarts.dispose(myChart.current)
        }
      }
    }, [])

    /*视口改变 echarts  -resize*/
    useImperativeHandle(ref, () => ({
      resize: () => {
        if (myChart.current) {
          // console.log("--Right--Bar--resize--")
          myChart.current.resize()
        }
      }
    }))
    return (
      <div className="bar-box">
        <div
          ref={chartDom}
          style={{ width: '400px', height: barHeight }}
          className="echarts-bar"
        ></div>
      </div>
    )
  }
)
